"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { motion } from "framer-motion"
import {
  Home,
  Calendar,
  Users,
  User,
  Plus,
  Bell,
  Settings,
  BookOpen,
  MessageSquare,
  FolderOpen,
  Database,
  Calendar as CalendarIcon,
  ChevronDown,
  LogOut,
  LogIn,
  UserPlus,
  Globe,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { LanguageSwitcher } from "@/components/language-switcher"
import { useTranslation } from "@/lib/i18n"
import { useAuth } from "@/contexts/auth-context"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function Navigation() {
  const pathname = usePathname()
  const [notifications] = useState(3)
  const { t, currentLang, changeLanguage } = useTranslation()
  const { user, isAuthenticated, logout } = useAuth()

  const navItems = [
    { href: "/", label: t("home"), icon: Home, requiresAuth: false },
    { href: "/calendar", label: t("calendar"), icon: Calendar, requiresAuth: false },
    { href: "/lobby", label: t("lobby"), icon: Globe, requiresAuth: true },
    { href: "/teams", label: t("teams"), icon: Users, requiresAuth: false },
    { href: "/learn", label: t("learn"), icon: BookOpen, requiresAuth: false },
    { href: "/discuss", label: t("discuss"), icon: MessageSquare, requiresAuth: false },
    { href: "/projects", label: t("projects"), icon: FolderOpen, requiresAuth: false },
    { href: "/datasets", label: t("datasets"), icon: Database, requiresAuth: false },
    { href: "/events", label: t("events"), icon: CalendarIcon, requiresAuth: false },
    { href: "/profile", label: t("profile"), icon: User, requiresAuth: true },
    { href: "/create", label: t("create"), icon: Plus, requiresAuth: true },
  ]

  return (
    <motion.nav
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      className="fixed top-0 left-0 right-0 z-50 glass border-b border-white/20"
    >
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <Link href="/" className="flex items-center space-x-2">
            <motion.div
              className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center glow-animation"
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.95 }}
            >
              <span className="text-white font-bold text-sm">H</span>
            </motion.div>
            <span className="text-xl font-bold text-gradient-animate">HackPlay</span>
          </Link>

          {/* 导航菜单 */}
          <div className="hidden lg:flex items-center space-x-1">
            {navItems.slice(0, 8).map((item) => {
              const Icon = item.icon
              const isActive = pathname === item.href
              const needsAuth = item.requiresAuth && !isAuthenticated

              const handleClick = (e: React.MouseEvent) => {
                if (needsAuth) {
                  e.preventDefault()
                  window.location.href = '/auth/login'
                }
              }

              return (
                <Link key={item.href} href={needsAuth ? "/auth/login" : item.href}>
                  <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                    <Button
                      variant={isActive ? "default" : "ghost"}
                      size="sm"
                      onClick={handleClick}
                      className={`flex items-center space-x-2 transition-all duration-300 relative ${
                        isActive
                          ? "bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg"
                          : needsAuth
                          ? "hover:bg-white/10 text-white/60 hover:text-blue-300"
                          : "hover:bg-white/10 text-white hover:text-blue-300"
                      }`}
                      title={needsAuth ? "需要登录" : undefined}
                    >
                      <Icon className="w-4 h-4" />
                      <span className="hidden xl:inline">{item.label}</span>
                      {needsAuth && (
                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-yellow-400 rounded-full animate-pulse" />
                      )}
                    </Button>
                  </motion.div>
                </Link>
              )
            })}
          </div>

          {/* 右侧操作 */}
          <div className="flex items-center space-x-3">
            <LanguageSwitcher currentLang={currentLang} onLanguageChange={changeLanguage} />

            {isAuthenticated ? (
              <>
                <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
                  <Button variant="ghost" size="sm" className="relative text-white hover:text-blue-300">
                    <Bell className="w-5 h-5" />
                    {notifications > 0 && (
                      <Badge
                        variant="destructive"
                        className="absolute -top-1 -right-1 w-5 h-5 text-xs p-0 flex items-center justify-center animate-pulse"
                      >
                        {notifications}
                      </Badge>
                    )}
                  </Button>
                </motion.div>

                <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
                  <Button variant="ghost" size="sm" className="text-white hover:text-blue-300">
                    <Settings className="w-5 h-5" />
                  </Button>
                </motion.div>

                {/* 用户菜单 */}
                <DropdownMenu modal={false}>
                  <DropdownMenuTrigger asChild>
                    <motion.div
                      className="flex items-center space-x-2 cursor-pointer"
                      whileHover={{ scale: 1.05 }}
                      whileTap={{ scale: 0.95 }}
                    >
                      <div className="w-8 h-8 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center">
                        {user?.avatar_url ? (
                          <img
                            src={user.avatar_url}
                            alt={user.username}
                            className="w-8 h-8 rounded-full object-cover"
                          />
                        ) : (
                          <span className="text-white text-sm font-medium">
                            {user?.username?.charAt(0).toUpperCase() || 'U'}
                          </span>
                        )}
                      </div>
                      <ChevronDown className="w-4 h-4 text-white/70" />
                    </motion.div>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-56 glass border-white/20">
                    <div className="px-3 py-2">
                      <p className="text-sm font-medium text-white">{user?.full_name || user?.username}</p>
                      <p className="text-xs text-white/70">{user?.email}</p>
                    </div>
                    <DropdownMenuSeparator className="bg-white/20" />
                    <DropdownMenuItem asChild>
                      <Link href="/profile" className="flex items-center gap-2 text-white hover:text-blue-300">
                        <User className="w-4 h-4" />
                        个人资料
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/settings" className="flex items-center gap-2 text-white hover:text-blue-300">
                        <Settings className="w-4 h-4" />
                        设置
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator className="bg-white/20" />
                    <DropdownMenuItem
                      onClick={logout}
                      className="flex items-center gap-2 text-red-400 hover:text-red-300 cursor-pointer"
                    >
                      <LogOut className="w-4 h-4" />
                      退出登录
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </>
            ) : (
              <div className="flex items-center space-x-2">
                <Link href="/auth/login">
                  <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                    <Button variant="ghost" size="sm" className="text-white hover:text-blue-300">
                      <LogIn className="w-4 h-4 mr-2" />
                      登录
                    </Button>
                  </motion.div>
                </Link>
                <Link href="/auth/register">
                  <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                    <Button size="sm" className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700">
                      <UserPlus className="w-4 h-4 mr-2" />
                      注册
                    </Button>
                  </motion.div>
                </Link>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 移动端底部导航 */}
      <div className="lg:hidden fixed bottom-0 left-0 right-0 glass border-t border-white/20">
        <div className="flex items-center justify-around py-2">
          {navItems.slice(0, 5).map((item) => {
            const Icon = item.icon
            const isActive = pathname === item.href

            return (
              <Link key={item.href} href={item.href}>
                <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
                  <Button
                    variant="ghost"
                    size="sm"
                    className={`flex flex-col items-center space-y-1 h-auto py-2 ${
                      isActive ? "text-blue-400" : "text-white"
                    }`}
                  >
                    <Icon className="w-5 h-5" />
                    <span className="text-xs">{item.label}</span>
                  </Button>
                </motion.div>
              </Link>
            )
          })}
        </div>
      </div>
    </motion.nav>
  )
}
